import React, { Component } from 'react';
import style from './loading.module.css';

export default class Loading extends Component {
    render() {
        const { masker, size, loading } = this.props;
        const maskerStyle = masker === false ? {} : { backgroundColor: 'rgb(0, 0, 0, 0.1)' };
        const loadingClass = loading ? style.loading : '';
        const spinSize = size === 'small' ? '40px' :
            size === 'large' ? '100px' : '70px';
        const spinStyle = { width: spinSize, height: spinSize };

        return (
            <div className={style["loading-container"]}>
                <div className={`${style["loading-icon"]} ${loadingClass}`} style={maskerStyle}>
                    <div className={style['loading-icon-wrapper']}>
                        <div className={style['loading-spin']} style={spinStyle}></div>
                        <div className={style['loading-text-wrapper']}>
                            <p className={style['loading-text']}>加载中...</p>
                        </div>
                    </div>
                </div>
                <div className={style['loading-content']}>
                    {this.props.children}
                </div>
            </div>
        )
    }
}

